import React, { Component } from 'react'
import Header from '../../components/Header/Header'
// import ToSearch from '../../components/ToSearch/ToSearch'
import { reqgetgoodsinfo,reqcartadd } from '../../http/api'
import { Tabs, Button ,Toast} from 'antd-mobile'
import { $pre } from '../../http/http'

import "./Detail.less"

export default class Detail extends Component {
  constructor() {
    super()
    this.state = {
      goodsinfo: {},
      toplist: ["商品", "评价", "详情", "推荐"]
    }
  }
  async componentDidMount() {
    let { id } = this.props.match.params
    let res = await reqgetgoodsinfo({ id: id })
    if (res.data.code === 200) {
      this.setState({
        goodsinfo: res.data.list[0] ? res.data.list[0] : {}
      })
    }
  }
  async addCar(){
    let { id,type } = this.props.match.params
    let res=await reqcartadd({
      uid:JSON.parse(localStorage.getItem("isLogin")).uid,
      goodsid:id,
      type,
      num:1
    })
    if(res.data.code===200){
      Toast.show({
        icon: 'success',
        content: '添加成功',
      }) 
    }
  }

  render() {
    let { goodsinfo, toplist } = this.state
    return (
      <div className='detail'>
        {/* <div>goodsinfo:{JSON.stringify(goodsinfo)}</div> */}
        <Header back title="详情页"></Header>
        {/* <ToSearch></ToSearch> */}
        {/* tab切换栏 */}
        <Tabs>
          {toplist.map((item, index) => {
            return <Tabs.Tab title={item} key={index}></Tabs.Tab>
          })}
        </Tabs>
        {/* 商品图 */}
        <div className='detail_img'>
          <img src={$pre + goodsinfo.img} alt="" />
        </div>

        <div className='detail_info'>
          <div className='detail_info_price'>
            <span>现价：￥{goodsinfo.price}</span> &nbsp;&nbsp;
            <del>原价：￥{goodsinfo.market_price}</del>
          </div>
          <h3>{goodsinfo.goodsname}</h3>
          <h3>{goodsinfo.description}</h3>
        </div>

        <div className='detail_footer'>
          <Button color='warning'>客服</Button>
          <Button color='primary'
           onClick={() => { this.props.history.push("/index/home") }}
          >店铺</Button>
          <Button color='success'
            onClick={() => { this.props.history.push("/car") }}
          >购物车</Button>
          <Button color='warning'
            onClick={() => { this.addCar() }}
          >加入购物车</Button>
          <Button color='danger'>立即购买</Button>
        </div>
      </div>
    )
  }
}
